<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./1.css">
    <script src="./echarts.min.js"></script> 
    <script src="../china.js"></script> 
</head> 
<body>
    <div class="box">
        <!-- 左边部分 -->
        <div class="left">
            <div class="leftheader"> <br><br>
                <p>//当前人数//</p> <br>
                <h3>3,456,789</h3>
            </div>
            <div class="lefttitle">
                <div class="leftbox1">开发二组人员分析</div>
                <div class="leftbox2">
                    <div class="echartsPie" style="width: 100%;height: 100%"></div>
                </div>
                <div class="leftbox1">人口出入记录</div>
            </div>
            <div class="leftfooter">
                <table style="width: 100%; height: 100%;color: white;border: 1px solid #1a6ea6;" cellspacing="0"
                    border="1">
                    <tr align="center" style="background-color: #1a6ea6;border: 1px solid #1a6ea6;">
                        <td>姓名</td>
                        <td>角色</td>
                        <td>进入方式</td>
                        <td>日期</td>
                    </tr>
                    <tr align="center">
                        <td>奥奥</td>
                        <td>访客</td>
                        <td>人数</td>
                        <td>
                            <p>2018.11.10</p>
                            <p>135123</p>
                        </td>
                    </tr>
                    <tr align="center">
                        <td>奥奥</td>
                        <td>访客</td>
                        <td>人数</td>
                        <td>
                            <p>2018.11.10</p>
                            <p>135123</p>
                        </td>
                    </tr>
                    <tr align="center">
                        <td>奥奥</td>
                        <td>访客</td>
                        <td>人数</td>
                        <td>
                            <p>2018.11.10</p>
                            <p>135123</p>
                        </td>
                    </tr>
                    <tr align="center">
                        <td>奥奥</td>
                        <td>访客</td>
                        <td>人数</td>
                        <td>
                            <p>2018.11.10</p>
                            <p>135123</p>
                        </td>
                    </tr>
                </table>
            </div>

        </div>
        <div class="zpbbox1">

        </div>
        <!-- 中间部分 -->
        <div class="title">
            <div class="titleheader">
                <div>
                    <img src="../day03/大屏可视化素材图/素材图/jinghui.png" alt=""> &emsp;
                    <p>智慧社区内网比对平台</p>
                </div>
            </div>
            <div class="titlebox">
                <div class="titlebox1">
                    <div class="titlebox1-1">
                        <h1>16:19:50</h1>
                        <p>2022/10/22 星期六 天气晴 </p>
                    </div>
                    <div class="titlebox1-2">
                        |
                    </div>
                    <div class="titlebox1-3">
                        <img src="../day03/大屏可视化素材图/素材图/weather/多云.png" alt=""> &emsp;
                        <div>
                            <p>多云</p>
                            <p>25°</p>
                            <p>微风</p>
                        </div>
                    </div>
                </div>
                <div class="titlebox2">
                    <img src="../day03/大屏可视化素材图/素材图/line_bg.png" alt="">  
                </div>
                <div class="titlebox3"> 
                    <p style="color: yellow;">No.1北京：2541289人</p>
                    <p style="color: greenyellow;">No.2天津：5630人</p>
                    <p style="color: paleturquoise;">No.3河北：454人</p>
                </div>
            </div> 
            <div class="titlebox4">
                <!-- <img src="../day03/大屏可视化素材图/微信图片_20220516231808.png" alt="" style="width: 93%; height: 500px;margin-top: 20px;" > -->
                <div id="ditu" style="width: 600px;height: 500px;">

                </div>






            </div>
        </div>
        <div class="zpbbox1">

        </div>
        <!-- 右边部分 -->
        <div class="rigth">
            <div class="rigthheader">
                <header> 二组开发人员分布 </header>
                <div id="pic2">

                </div>
            </div>
            <div class="rigthtitle">
                <header> 二组开发人员分布 </header>
                <div id="zhuxing">

                </div>
            </div>
            <div class="rigthfooter">
                <header> 二组开发人员分布 </header>
                <div id="quxian">

                </div>
            </div>

        </div>
    </div>
</body>
<script>
   const ditu=echarts.init(document.querySelector('#ditu'))
   
   function randomData(){
    return Math.round(Math.random()*500)
  }


var data = [
        {
          name: "内蒙古",
          itemStyle: {
            areaColor: "#56b1da",
          },
          value:[110.3467, 41.4899]
        },
      ];
      var option = {
        geo: {
          map: "china",
          aspectScale: 0.8,
          layoutCenter: ["50%", "50%"],
          layoutSize: "120%",
          itemStyle: {
            normal: {
              areaColor: {
                type: "linear-gradient",
                x: 0,
                y: 1200,
                x2: 1000,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "#152E6E", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#0673AD", // 50% 处的颜色
                  },
                ],
                global: true, // 缺省为 false
              },
              shadowColor: "#0f5d9d",
              shadowOffsetX: 0,
              shadowOffsetY: 15,
              opacity: 0.5,
            },
            emphasis: {
              areaColor: "#0f5d9d",
            },
          },

          regions: [
            {
              name: "南海诸岛",
              itemStyle: {
                areaColor: "rgba(0, 10, 52, 1)",
                borderColor: "rgba(0, 10, 52, 1)",
                normal: {
                  opacity: 0,
                  label: {
                    show: false,
                    color: "#009cc9",
                  },
                },
              },
              label: {
                show: false,
                color: "#FFFFFF",
                fontSize: 12,
              },
            },
          ],
        },
        series: [
          {
            type: "map",
            selectedMode: "multiple",
            mapType: "china",
            aspectScale: 0.8,
            layoutCenter: ["50%", "50%"], //地图位置
            layoutSize: "120%",
            zoom: 1, //当前视角的缩放比例
            // roam: true, //是否开启平游或缩放
            scaleLimit: {
              //滚轮缩放的极限控制
              min: 1,
              max: 2,
            },
            label: {
              show: false,
              color: "#FFFFFF",
              fontSize: 16,
            },
            itemStyle: {
              normal: {
                areaColor: "#0c3653",
                borderColor: "#1cccff",
                borderWidth: 1.8,
              },
              emphasis: {
                areaColor: "#56b1da",
                label: {
                  show: false,
                  color: "#fff",
                },
              },
            },
            data: data,
          },
          {
              name: 'Top 5',
              type: 'scatter',
              coordinateSystem: 'geo',
            //   symbol: 'image://http://ssq168.shupf.cn/data/biaoji.png',
              // symbolSize: [30,120],
              // symbolOffset:[0, '-40%'] ,
              label: {
                  normal: {
                      show: false,
                  }
              },
              itemStyle: {
                  normal: {
                      color: '#D8BC37', //标志颜色
                  }
              },
              data: data,
              showEffectOn: 'render',
              rippleEffect: {
                  brushType: 'stroke'
              },
              hoverAnimation: true,
              zlevel: 1
          },
        ],
      };

    ditu.setOption(option)








    const myechartsDom = echarts.init(document.querySelector('.echartsPie'))
    const options = {
        legend: {   //左侧信息
            width: 100,
            x: 'left',
            y: 'top',
            textStyle: {
                color: '#fff'
            },
            data: ['卖淫嫖娼', '经侦嫌疑', '重点人口', '刑侦重点', '吸毒人口']
        },

        series: [{
            type: 'pie',
            center: ['50%', '60%'],  //位于x轴和y轴d饿大小
            radius: [0, 70],  //半径
            itemStyle: {
                color: function (params) {
                    var colorList = ['#c1232b', '#27727b', '#fcce10', '#e87c25', '#b5c334']
                    return colorList[params.dataIndex]
                }
            },
            data: [{
                name: '卖淫嫖娼',
                value: 300
            },
            {
                name: '经侦嫌疑',
                value: 200
            },
            {
                name: '重点人口',
                value: 300
            },
            {
                name: '刑侦重点',
                value: 100
            },
            {
                name: '吸毒人口',
                value: 1400
            },
            ]
        }]
    }
    myechartsDom.setOption(options)

    
    // 右一
    const pic2 = echarts.init(document.querySelector("#pic2"))

    const option2 = {
        title: {
            X: 'right',
            y: 'top',
            text: '单位：岁',
            textStyle: {
                fontSize: 13,
                color: 'white'
            }
        },
        legend: {
            width: 100,
            x: 'left',
            y: '20px',
            textStyle: {
                color: 'pink'
            },
            data: ['7-12', '13-18', '19-25', '26-32', '32以上', '未标明']
        },
        series: [
            {
                type: 'pie',
                center: ['50%', '50%'],
                radius: [40, 70],
                label: {
                    show: false
                },
                itemStyle: {
                    color: function (params) {
                        var colorlist = ['pink', 'skyblue', 'hotpink', 'yellow', 'palevioletred', 'palegreen']
                        return colorlist[params.dataIndex]
                    }
                },
                data: [
                    {
                        name: '7-12',
                        value: 350
                    },
                    {
                        name: '13-18',
                        value: 350
                    },
                    {
                        name: '19-25',
                        value: 300
                    },
                    {
                        name: '26-32',
                        value: 200
                    },
                    {
                        name: '32以上',
                        value: 800
                    },
                    {
                        name: '未标明',
                        value: 100
                    },
                ]
            }
        ]
    }
    pic2.setOption(option2)


    // 右二
    const myzhuxing = echarts.init(document.querySelector("#zhuxing"))
    const zhuxingprop = {
        xAxis: {  //x轴
            axisLable: {
                textStyle: {
                    color: "#fadb71"
                } 
            },
            data: [
                '河北', '石家庄', '保定', '北京', '天津', '山西', '海南',
            ]
        },
        yAxis: {  //y轴的颜色
            axisLable: {  
                textStyle: {
                    color: 'pink'
                }
            },
            splitLine: {  //线为虚线
                show: true,
                lineStyle: {
                    type: 'dashed'
                }
            }
        },
        series: [{  //柱形图数据
            color: 'hotpink',
            type: 'bar',
            data: ['100', '200', '300', '380', '100', '350', '500']
        }]
    }
    myzhuxing.setOption(zhuxingprop)


    // 右三
    const quxianDom = echarts.init(document.querySelector("#quxian"))
    const lineProps = {

        xAxis: {
            axisLabel: {
                textStyle: {
                    color: '#79f104'
                }
            },

            data: ['6:00-9:00', '10:00-12:00', "13:00-15:00", '16:00-20:00', '21:00-24:00']
        },
        yAxis: {

            axisLabel: {
                textStyle: {
                    color: 'hotpink'
                }
            },
            // data: ['0', '200', "400", '600', '800'],
        },
        series: [{
            color: 'hotpink',
            type: 'line',
            data: [800, 300, 500, 800, 300]
        }]
    }
    quxianDom.setOption(lineProps)


</script>

</html>
<style>

</style>